<template>
  <div>
<!--    因为在小程序中js中的eval方法不能被使用，所以这里用另一种方法-->
<!--    https://zhaoshuquan.com/2019/10/18/use-mpvue-to-make-a-calculator-wechat-applet-like-mac-calculator/-->
    <div id="calculator">
      <div class="display-pad">
        <div class="display-area">{{ value || 0 }}</div>
        <div class="display-area-temp" v-if="tempDisplayValue">{{ tempDisplayValue }}</div>
        <div class="display-area-temp" v-else style="color: #505050">0</div>
      </div>
      <div class="input-pad">
        <button class="key function-key" @tap="clearAll">AC</button>
        <button class="key function-key" @tap="clearDisplay">←</button>
        <button class="key function-key" @tap="inputPercent">%</button>
        <button class="key operation-key" @tap="performOperation('/')">÷</button>
        <button class="key digit-key" @tap="inputDigit(7)">7</button>
        <button class="key digit-key" @tap="inputDigit(8)">8</button>
        <button class="key digit-key" @tap="inputDigit(9)">9</button>
        <button class="key operation-key" @tap="performOperation('*')">×</button>
        <button class="key digit-key" @tap="inputDigit(4)">4</button>
        <button class="key digit-key" @tap="inputDigit(5)">5</button>
        <button class="key digit-key" @tap="inputDigit(6)">6</button>
        <button class="key operation-key" @tap="performOperation('-')">−</button>
        <button class="key digit-key" @tap="inputDigit(1)">1</button>
        <button class="key digit-key" @tap="inputDigit(2)">2</button>
        <button class="key digit-key" @tap="inputDigit(3)">3</button>
        <button class="key operation-key" @tap="performOperation('+')">+</button>
        <button class="key digit-key key-0" @tap="inputDigit(0)">0</button>
        <button class="key digit-key" @tap="inputDot">●</button>
        <button class="key operation-key" @tap="performOperation('=')">=</button>
      </div>
    </div>
  </div>
</template>

<script>
  const CalculatorOperations = {
    '/': function (prevValue, nextValue) {
      return Math.round((prevValue / nextValue)*10000)/10000 // 除不尽的小数保留小数点后4位
      // return prevValue / nextValue
    },
    '*': function (prevValue, nextValue) {
      return prevValue * nextValue
    },
    '+': function (prevValue, nextValue) {
      return prevValue + nextValue
    },
    '-': function (prevValue, nextValue) {
      return prevValue - nextValue
    },
    '=': function (prevValue, nextValue) {
      return nextValue
    }
  }

  export default {
    name: 'counter',
    data() {
      return {
        value: null, // 存储当前计算结果
        displayValue: '0', // 当前显示的数字
        tempDisplayValue: '',
        operator: null, // 当前运算符
        waitingForOperand: false // 等待下一个运算数
      }
    },
    watch: {
      displayValue() {

      }
    },
    methods: {
      // 等于
      performOperation (nextOperator) {
        if (this.displayValue == 0) return // 如果输入的0，不用管，不要相加

        let inputValue = parseFloat(this.displayValue)
        if (this.value === null) {
          this.value = inputValue
        } else if (this.operator) {
          let currentValue = this.value || 0
          let newValue = CalculatorOperations[this.operator](currentValue, inputValue)
          this.value = newValue
          this.displayValue = String(newValue)
        }

        if (nextOperator !== '=') this.tempDisplayValue += nextOperator // ------->>>（不显示=的时候）
        if (nextOperator === '=') this.tempDisplayValue = ''

        this.waitingForOperand = true
        this.operator = nextOperator
      },
      // 实现输入数字逻辑
      inputDigit (digit) {
        if (this.waitingForOperand) {
          this.displayValue = String(digit)
          this.waitingForOperand = false
        } else {
          this.displayValue = this.displayValue === '0' ? String(digit) : this.displayValue + digit
        }
        this.tempDisplayValue += digit // ------->>>
      },
      // 输入小数点
      inputDot () {
        if (!(/\./).test(this.displayValue)) {
          this.displayValue += '.'
          this.tempDisplayValue += '.' // ------->>>
          this.waitingForOperand = false
        }
      },
      // 输入百分之
      inputPercent () {
        let currentValue = parseFloat(this.displayValue)
        if (currentValue === 0) {
          return
        }
        let fixedDigits = this.displayValue.replace(/^-?\d*\./, '')
        let newValue = parseFloat(this.displayValue) / 100
        this.displayValue = String(newValue.toFixed(fixedDigits.length + 2))
        this.tempDisplayValue += '%' // ------->>>
      },
      // AC操作，清楚所有输入的
      clearAll () {
        this.value = null
        this.displayValue = '0'
        this.operator = null
        this.waitingForOperand = false
        this.tempDisplayValue = '' // ------->>>
      },
      // ←操作，清楚当前输入的
      clearDisplay () {
        this.displayValue = '0'
        this.tempDisplayValue = '' // ------->>>
      },
    }
  }
</script>

<style scoped>
  #calculator {
    height: 100vh;
    width: 100%;
    background: #000000;
  }

  #calculator .display-pad {
    height: 25%;
    width: 100%;
  }

  #calculator .display-pad .display-area {
    padding: 0 30rpx;
    text-align: right;
    font-size: 80rpx;
    color: #ffffff;
  }
  #calculator .display-pad .display-area-temp {
    padding: 0 30rpx;
    text-align: right;
    font-size: 50rpx;
    color: #ffffff;
  }

  #calculator .input-pad {
    height: 75%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #calculator .key {
    width: 100%;
    height: 100%;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
  }

  #calculator .key:active {
    box-shadow: inset 0 0 80rpx 0 rgba(0,0,0,0.25);
  }

  #calculator .key::after {
    border-radius: 0;
  }

  #calculator .input-pad .key-0 {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  #calculator .display-pad {
    background: #505050;
  }

  #calculator .function-key {
    background: #D4D4D2;
  }

  #calculator .operation-key {
    background: #FF9500;
    color: #ffffff;
    font-size: 30rpx;
  }
</style>
